<template>
  <div class="sector">
    <!-- 所有产品展示 -->
    <el-table :data="pages.products" border style="width: 100%">
      <el-table-column prop="_id" label="id" width="230"></el-table-column>
      <el-table-column prop="productName" label="产品名字" width="200"></el-table-column>
      <el-table-column prop="compensation" label="保额" width="150"></el-table-column>
      <el-table-column prop="indate" label="有效期" width="120"></el-table-column>
      <el-table-column prop="uptime" label="开始时间" width="130"></el-table-column>
      <el-table-column prop="belongInsureSortId.sortName" label="产品分类" width="150"></el-table-column>
      <el-table-column label="操作" width="160" v-if="vIf['onlyAdmin']">
        <template slot-scope="scope">
          <el-button
            @click="deleteProduct(scope.row._id)"
            type="text"
            size="small"
            style="color:red"
          >删除</el-button>
          <el-button type="text" size="small" @click="editProductt(scope.row._id)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" v-else>
        <template slot-scope="scope">
          <i class="el-icon-circle-close"></i>
          <span>无权限操作</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pages.currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,sizes, prev, pager, next,jumper"
        :total="pages.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "publicStore"
);
import api from "../../http/apis/apis";
export default {
  data() {
    return {
      pages: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
        totalPage: 0,
        products: [],
      },
      vIf: {
        onlyAdmin: ["1", "9"].some((item) => item == sessionStorage.permission),
      },
    };
  },
  created() {
    this.getItem();
    this.setNowBreadcrumb("insureProduct");
  },
  methods: {
    ...mapMutations(["setNowBreadcrumb"]),
    // ...mapActions(['getItem'])
    async getItem() {
      const { data } = await api.insureProductApi.getItems(this.pages);
      if (data.status) {
        this.pages = data.data;
      }
    },
    async deleteProduct(id) {
      this.$confirm("此操作将永久删除该产品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await api.insureProductApi.delItem(id);
          if (data.status) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getItem();
          } else {
            this.$message({
              type: "info",
              message: "删除失败",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editProductt(id) {
      //把id传过去
      this.$router.push({ path: "/system/insureProduct/modItem/" + id });
    },
    //分页相关数据
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pages.pageSize = val;
      this.getItem(this.pages);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pages.currentPage = val;
      this.getItem(this.pages);
    },
  },
};
</script>

<style lang="scss" scoped>
thead {
  line-height: 60px;
}
table {
  text-align: center;
}
.sector {
  padding-top: 1px;
}
@import "../../assets/scss/public/sector.scss";
</style>